<script setup>
import userService from '@/api/modules/user.js'
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
import { useCountDown } from '@/hooks/useCountDown.js'
import useUserStore from '@/store/modules/user.js'
import messageHelper from '@/utils/messageHelper.js'

const emit = defineEmits(['register-success'])
const registerRef = ref(null)
const registerForm = ref({})
const loading = ref(false)
const registerRules = {
  userName: [{ required: true, trigger: 'blur', message: '请输入手机号码' }, { pattern: /^1[3-9|]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
  password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }, { min: 6, max: 18, message: '密码长度在6到18个字符', trigger: 'blur' }],
  confirmPassword: [{ required: true, trigger: 'blur', message: '请确认您的密码' }, { validator: validatePass, trigger: 'blur' }],
  nickName: [{ required: true, trigger: 'blur', message: '请输入企业名称' }, { min: 2, max: 30, message: '企业名称长度在2到30个字符', trigger: 'blur' }],
  // phonenumber: [{ required: true, trigger: 'blur', message: '请输入手机号码' }, { pattern: /^1[3-9|]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
  smsCode: [{ required: true, trigger: 'blur', message: '请输入验证码' }, { min: 6, max: 6, message: '验证码长度为6位', trigger: 'blur' }, { pattern: /^\d+$/, message: '验证码只能包含数字', trigger: 'blur' }],
}
const { proxy } = getCurrentInstance()
const userStore = useUserStore()
const { countDown, reset, start } = useCountDown(60)

function validatePass(rule, value, callback) {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  }
  else if (value !== registerForm.value.password) {
    callback(new Error('两次输入密码不一致!'))
  }
  else {
    callback()
  }
}

function getSmsCode() {
  const formRef = registerRef.value
  formRef.validateField(['userName', 'password', 'confirmPassword', 'nickName'], (valid) => {
    if (valid) {
      userService.captchaSms({
        phonenumber: registerForm.value.userName,
        type: 2,
      }).then((res) => {
        reset()
        start()
        messageHelper.message.success('验证码发送成功，请注意查收')
      })
    }
  })
}

function handleRegister() {
  const formRef = registerRef.value
  const params = registerForm.value
  params.phonenumber = params.userName
  formRef.validate((valid) => {
    if (valid) {
      loading.value = true
      userStore.authRegister(params).then((res) => {
        emit('register-success')
      }).finally(() => {
        loading.value = false
      })
    }
  })
}
</script>

<template>
  <el-form ref="registerRef"
           :hide-required-asterisk="true"
           :model="registerForm" :rules="registerRules" class="item-container" label-position="top">
    <el-form-item prop="userName" label="手机号码">
      <el-input
        v-model="registerForm.userName"
        type="text"
        size="large"
        auto-complete="off"
        placeholder="请输入手机号码"
      >
        <template #prefix>
          <SvgIcon name="ri:smartphone-line" class="el-input__icon input-icon" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password" label="密码">
      <el-input
        v-model="registerForm.password"
        type="password"
        size="large"
        auto-complete="off"
        show-password
        placeholder="请输入密码"
      >
        <template #prefix>
          <SvgIcon name="ri:lock-line" class="el-input__icon input-icon" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="confirmPassword" label="确认密码">
      <el-input
        v-model="registerForm.confirmPassword"
        type="password"
        size="large"
        auto-complete="off"
        show-password
        placeholder="请再次输入密码"
      >
        <template #prefix>
          <SvgIcon name="ri:lock-line" class="el-input__icon input-icon" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="nickName" label="企业名称">
      <el-input
        v-model="registerForm.nickName"
        type="text"
        size="large"
        auto-complete="off"
        placeholder="请输入您的企业名称"
      >
        <template #prefix>
          <SvgIcon name="hugeicons:corporate" class="el-input__icon input-icon" />
        </template>
      </el-input>
    </el-form-item>
    <!-- <el-form-item prop="phonenumber">
      <el-input
        v-model="registerForm.phonenumber"
        type="text"
        size="large"
        auto-complete="off"
        placeholder="手机号码"
      >
      <template #prefix>
          <svg-icon name="phone" class="el-input__icon input-icon" />
        </template>
      </el-input>
    </el-form-item> -->
    <el-form-item prop="smsCode" label="验证码">
      <el-input
        v-model="registerForm.smsCode"
        type="text"
        size="large"
        auto-complete="off"
        placeholder="请输入手机验证码"
        class="!w-[72%]"
      >
        <template #prefix>
          <SvgIcon name="ri:shield-check-line" class="el-input__icon input-icon" />
        </template>
      </el-input>
      <el-button
        size="large"
        class="!w-[25%] ml-3"
        :disabled="countDown < 60 && countDown > 0"
        @click="getSmsCode"
      >
        {{ (countDown === 60 || countDown === 0) ? '获取验证码' : `${countDown}秒后重试` }}
      </el-button>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button
        :loading="loading"
        size="large"
        type="primary"
        class="!w-full !text-[16px] transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
        @click.prevent="handleRegister"
      >
        <span v-if="!loading">注 册</span>
        <span v-else>注 册 中...</span>
      </el-button>
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped>

</style>
